<template>
    <div style="margin-left: 10px;text-align: center;">
      <a-popover  placement="left">
        <template slot="content">
          <p style="font-size: 18px;font-weight: 400">{{"工具简介"}}</p>
          <p id="p">{{app.description}}</p>
          <div style="width:100%;text-align:right;">
     <!--    <router-link :to="'/tool-details-'+app.id">详细信息</router-link>-->
            <span @click="See(app.url)" >详细信息</span>
          </div>
        </template>
        <div class="Box">
          <div class="box-son">
            <img :src="imageSrc(app.icon)" style="width: 54px;height: 54px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: 10px auto 0 auto;">
            <div style=" font-size: 15px;font-weight: 800;white-space: nowrap;margin-top: 65px">{{app.name}}</div>
          </div>
        </div>
      </a-popover>
    </div>
</template>
<script>
  export default {
    props: {
      file: {
        type: Object,
        require: true
      },
      column: {
        type: Number,
        default: 4
      },
      position: {
        type: Number,
        default: 0
      }
    },
    components: {

    },
    data() {
      let that = this
      return {
        downloading: false,
        downloadPercent: 20,
        app: Object.assign({}, that.file)
      }
    },
    methods: {
      downloadApp(app) {
        this.downloading = true
      },
      imageSrc(icon) {
        console.log(icon)
        return this.publicPath + 'images/index/' + icon + '.png'
      },
      See(e){
        window.open(e)
      }
    }
  }
</script>
<style scoped>
  .Box{
    width: 100px;
    height: 100px;
    position: relative;
  }
  .box-son{
    position: absolute;
    width: 100%;
    height: 100%;
    border:1px solid RGB(232,234,236);
    text-align: center;
  }
  .app-subscript {
    font-size: 13px;
    font-weight: 800;
    padding: 3px 8px 3px 8px;
    margin: 0 0 3px 0;
    text-align: left;
  }
  span{
    color: #09a7ff; text-decoration:none; cursor:pointer;
  }
  span:hover {text-decoration:underline; color: #09d0ff;}
  #p{
    width: 300px;
    height: 100px;
  }
</style>
